<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <img :src="headerUrl" alt="">
      </div>
      <span class="logo">
        
      </span>
      <span class="title">电商平台实时监控系统</span>
      <div class="title-right">
        <img :src="themeUrl" class="qiehuan" @click="handleChangeTheme">
        <span class="datetime">2049-01-01 00:00:00</span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top" :class="{fullscreen: fullScreenStatus.trend}">
          <!-- 销量趋势图表 -->
          <Trend ref="trend"></Trend>
          <!-- 全屏按钮 icon-compress-alt 关闭全屏-->
          <div class="resize">
            <span @click="handleResize('trend')" :class="['iconfont', fullScreenStatus.trend ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
        <div id="left-bottom" :class="{fullscreen: fullScreenStatus.seller}">
          <!-- 商家销售金额图表 -->
          <Seller ref="seller"></Seller>
          <div class="resize">
            <span @click="handleResize('seller')" :class="['iconfont', fullScreenStatus.seller ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </section>
      <section class="screen-middle">
        <div id="middle-top" :class="{fullscreen: fullScreenStatus.map}">
          <!-- 商家分布图表 -->
          <Map ref="map"></Map>
          <div class="resize">
            <span @click="handleResize('map')" :class="['iconfont', fullScreenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>   
        </div>
        <div id="middle-bottom" :class="{fullscreen: fullScreenStatus.rank}">
          <!-- 地区销量排行图表 -->
          <Rank ref="rank"></Rank>
          <div class="resize">
            <span @click="handleResize('rank')" :class="['iconfont', fullScreenStatus.rank ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>    
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top" :class="{fullscreen: fullScreenStatus.hot}">
          <!-- 热销商品占比图表 -->
          <Hot ref="hot"></Hot> 
          <div class="resize">
            <span @click="handleResize('hot')" :class="['iconfont', fullScreenStatus.hot ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>  
        </div>
        <div id="right-bottom" :class="{fullscreen: fullScreenStatus.stock}">
          <!-- 库存销量分析图表 -->
          <Stock ref="stock"></Stock> 
          <div class="resize">
            <span @click="handleResize('stock')" :class="['iconfont', fullScreenStatus.stock ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>  
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs, nextTick, getCurrentInstance, onUnmounted, computed  } from 'vue'
import { useStore } from 'vuex'
import WebSocketSerivce from '@/utils/socket_service'
import { getThemeValue } from '../utils/theme_utils'
import Hot from '@/components/hot.vue'
import Map from '@/components/map.vue'
import Rank from '@/components/rank.vue'
import Seller from '@/components/seller.vue'
import Stock from '@/components/stock.vue'
import Trend from '@/components/trend.vue'
export default {
  name: 'screenPage',
  setup() {
    const { proxy } = getCurrentInstance()
    const store = useStore();
    const state = reactive({
      fullScreenStatus: {
        trend: false,
        seller: false,
        map: false,
        rank: false,
        hot: false,
        stock: false,
      }
    })
    const seller = ref(null)
    const map = ref(null)
    const hot = ref(null)
    const stock = ref(null)
    const trend = ref(null)
    const rank = ref(null)

    const headerUrl = computed(() => {
      return '/static/img/' + getThemeValue(store.state.theme).headerBorderSrc
    })
    const themeUrl = computed(() => {
      return '/static/img/' + getThemeValue(store.state.theme).themeSrc
    })
    const containerStyle = computed(() => {
      return {
        backgroundColor: getThemeValue(store.state.theme).backgroundColor,
        color: getThemeValue(store.state.theme).titleColor
      }
    })

    const handleScreen = data => {
      state.fullScreenStatus[data.chartName] = data.value
      nextTick(() => {
        proxy.$refs[data.chartName].screenAdapter()
      }) 
    }
    const themeChange = () => {
      
      store.commit('changeTheme')
    }
    WebSocketSerivce.instance.registerCallBack('fullScreen', handleScreen)
    WebSocketSerivce.instance.registerCallBack('themeChange', themeChange)
    onUnmounted(() => {
      WebSocketSerivce.instance.unRegisterCallBack('fullScreen')
      WebSocketSerivce.instance.unRegisterCallBack('themeChange')
    })

    const handleResize = chartName => {
      // 只有自己全屏
      // state.fullScreenStatus[chartName] = !state.fullScreenStatus[chartName]
      // // 需要重新计算canvas的大小
      // // 注意 在修改数据之后 DOM并没有立马更新 全屏类还没加上去 state.fullScreenStatus[type]的值还没有改变
      // nextTick(() => {
      //   proxy.$refs[chartName].screenAdapter()
      // })

      WebSocketSerivce.Instance.send({
        action: 'fullScreen',
        socketType: 'fullScreen',
        chartName,
        value: !state.fullScreenStatus[chartName]
      })
      
    }
    const handleChangeTheme = () => {
      WebSocketSerivce.Instance.send({
        action: 'themeChange',
        socketType: 'themeChange',
        chartName: '',
        value: ''
      })
      // store.commit('changeTheme')
    }
    return {
      ...toRefs(state),
      handleResize,
      handleChangeTheme,
      headerUrl,
      themeUrl,
      containerStyle,
      map,
      seller,
      hot,
      stock,
      trend,
      rank
    }
  },
  components: {
    Hot,
    Map,
    Rank,
    Seller,
    Stock,
    Trend
  },
}
</script>
<style lang="less" scoped>
// 全屏样式的定义
.fullscreen {
  position: fixed!important;
  top: 0 !important;
  left: 0 !important;
  width: 100%  !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}
.screen-header {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;
  > div {
      img {
        width: 100%;
      }
    }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position:absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }
  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }
  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }
  .logo {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-80%);
    img {
      height: 35px;
      width: 128px;
    }
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 10px;
  .screen-left {
    height: 100%;
    width: 27.6%;
    #left-top {
      height: 53%;
      position: relative;
    }
    #left-bottom {
      height: 31%;
      margin-top: 25px;
      position: relative;
    }
  }
  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    #middle-top {
      width: 100%;
      height: 56%;
      position: relative;
    }
    #middle-bottom {
      margin-top: 25px;
      width: 100%;
      height: 28%;
      position: relative;
    }
  }
  .screen-right {
    height: 100%;
    width: 27.6%;
    #right-top {
      height: 46%;
      position: relative;
    }
    #right-bottom {
      height: 38%;
      margin-top: 25px;
      position: relative;
    }
  }
}
.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
</style>
